<script setup lang="ts">
definePage({
  name: 'icon',
  style: {
    navigationBarTitleText: '图标演示',
  },
})

const { success: showSuccess } = useGlobalToast()

// WotUI 内置图标列表（精选9个）
const wotIcons = ref([
  { name: 'add', desc: '添加' },
  { name: 'close', desc: '关闭' },
  { name: 'check', desc: '勾选' },
  { name: 'arrow-right', desc: '右箭头' },
  { name: 'bags', desc: '购物袋' },
  { name: 'search', desc: '搜索' },
  { name: 'star', desc: '星标' },
  { name: 'heart', desc: '喜欢' },
  { name: 'setting', desc: '设置' },
])

// Carbon 图标是编译时的，不能动态渲染，所以直接在模板中静态写入

// 图标大小选项
const iconSizes = ref([
  { name: '小', value: '16px' },
  { name: '中', value: '20px' },
  { name: '大', value: '24px' },
  { name: '超大', value: '32px' },
])
const currentIconSize = ref('20px')

// 复制图标代码
function copyIconCode(iconName: string, isCarbon = false) {
  const code = isCarbon
    ? `<div class="i-carbon:${iconName} text-xl"></div>`
    : `<wd-icon name="${iconName}" size="20px" />`

  uni.setClipboardData({
    data: code,
    showToast: false,
    success: () => {
      uni.hideToast()
      showSuccess({ msg: '代码已复制到剪贴板' })
    },
  })
}

// 链接导航处理
function handleNavigate(url: string) {
  // #ifdef H5
  window.open(url, '_blank')
  // #endif
  // #ifndef H5
  uni.setClipboardData({
    data: url,
    showToast: false,
    success: () => {
      uni.hideToast()
      showSuccess({ msg: `${url} 已复制到剪贴板` })
    },
  })
  // #endif
}
</script>

<template>
  <view class="page-wrapper">
    <!-- 头部介绍 -->
    <view class="header-section">
      <view class="header-content">
        <view class="header-icon">
          🎯
        </view>
        <view class="header-title">
          图标使用演示
        </view>
        <view class="header-subtitle">
          WotUI 图标 & Iconify 图标集
        </view>
        <view class="header-description">
          丰富的图标资源，满足各种使用场景
        </view>
      </view>
    </view>

    <!-- 图标大小选择 -->
    <demo-block title="图标大小" transparent>
      <view class="size-selector-card">
        <view class="card-title">
          选择图标大小
        </view>
        <view class="size-buttons">
          <view
            v-for="size in iconSizes"
            :key="size.value"
            class="size-button"
            :class="{
              active: currentIconSize === size.value,
            }"
            @click="currentIconSize = size.value"
          >
            {{ size.name }} ({{ size.value }})
          </view>
        </view>
        <view class="size-preview">
          <wd-icon name="star" :size="currentIconSize" color="#f59e0b" />
          <view class="i-carbon:star star-icon" :style="{ fontSize: currentIconSize }" />
          <text class="preview-text">
            当前大小: {{ currentIconSize }}
          </text>
        </view>
      </view>
    </demo-block>

    <!-- WotUI 图标 -->
    <demo-block title="WotUI 内置图标（精选示例）" transparent>
      <!-- 说明文字 -->
      <view class="info-box">
        <view class="info-title">
          💡 说明
        </view>
        <view class="info-content">
          这里只展示了部分常用图标作为示例。完整的图标列表请查看
          <text class="info-link" @click="handleNavigate('https://wot-ui.cn/component/icon.html')">
            WotUI 官方文档
          </text>
        </view>
      </view>

      <!-- 图标网格 -->
      <view class="icon-grid">
        <view v-for="icon in wotIcons" :key="icon.name" class="icon-card" @click="copyIconCode(icon.name)">
          <view class="icon-wrapper">
            <wd-icon :name="icon.name" :size="currentIconSize" color="#666" />
          </view>
          <view class="icon-name">
            {{ icon.name }}
          </view>
          <view class="icon-desc">
            {{ icon.desc }}
          </view>
        </view>
      </view>

      <!-- 使用示例 -->
      <view class="example-card">
        <view class="card-title">
          使用示例
        </view>
        <view class="code-examples">
          <view class="code-block">
            <view class="code-title">
              基础用法:
            </view>
            <view class="code-content">
              &lt;wd-icon name="star" size="20px" color="#f59e0b" /&gt;
            </view>
          </view>
          <view class="code-block">
            <view class="code-title">
              自定义样式:
            </view>
            <view class="code-content">
              &lt;wd-icon name="home" size="24px" color="var(--wot-color-theme)" /&gt;
            </view>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- Carbon 图标 -->
    <demo-block title="Carbon 图标集" transparent>
      <view class="info-box">
        <view class="info-title">
          💡 说明
        </view>
        <view class="info-content">
          Iconify 图标集资源异常丰富，这里我们以 Carbon 图标集为例，展示如何使用图标。
          <text class="info-link" @click="handleNavigate('https://icones.js.org/collection/carbon')">
            Carbon 图标集
          </text>
        </view>
      </view>

      <!-- 图标网格 - 静态渲染 -->
      <view class="icon-grid">
        <!-- add -->
        <view class="icon-card" @click="copyIconCode('add', true)">
          <view class="icon-wrapper">
            <view class="i-carbon:add icon-carbon" :style="{ fontSize: currentIconSize }" />
          </view>
          <view class="icon-name">
            add
          </view>
          <view class="icon-desc">
            添加
          </view>
        </view>

        <!-- close -->
        <view class="icon-card" @click="copyIconCode('close', true)">
          <view class="icon-wrapper">
            <view class="i-carbon:close icon-carbon" :style="{ fontSize: currentIconSize }" />
          </view>
          <view class="icon-name">
            close
          </view>
          <view class="icon-desc">
            关闭
          </view>
        </view>

        <!-- checkmark -->
        <view class="icon-card" @click="copyIconCode('checkmark', true)">
          <view class="icon-wrapper">
            <view class="i-carbon:checkmark icon-carbon" :style="{ fontSize: currentIconSize }" />
          </view>
          <view class="icon-name">
            checkmark
          </view>
          <view class="icon-desc">
            确认
          </view>
        </view>

        <!-- arrow-right -->
        <view class="icon-card" @click="copyIconCode('arrow-right', true)">
          <view class="icon-wrapper">
            <view class="i-carbon:arrow-right icon-carbon" :style="{ fontSize: currentIconSize }" />
          </view>
          <view class="icon-name">
            arrow-right
          </view>
          <view class="icon-desc">
            右箭头
          </view>
        </view>

        <!-- home -->
        <view class="icon-card" @click="copyIconCode('home', true)">
          <view class="icon-wrapper">
            <view class="i-carbon:home icon-carbon" :style="{ fontSize: currentIconSize }" />
          </view>
          <view class="icon-name">
            home
          </view>
          <view class="icon-desc">
            首页
          </view>
        </view>

        <!-- search -->
        <view class="icon-card" @click="copyIconCode('search', true)">
          <view class="icon-wrapper">
            <view class="i-carbon:search icon-carbon" :style="{ fontSize: currentIconSize }" />
          </view>
          <view class="icon-name">
            search
          </view>
          <view class="icon-desc">
            搜索
          </view>
        </view>

        <!-- star -->
        <view class="icon-card" @click="copyIconCode('star', true)">
          <view class="icon-wrapper">
            <view class="i-carbon:star icon-carbon" :style="{ fontSize: currentIconSize }" />
          </view>
          <view class="icon-name">
            star
          </view>
          <view class="icon-desc">
            星级
          </view>
        </view>

        <!-- favorite -->
        <view class="icon-card" @click="copyIconCode('favorite', true)">
          <view class="icon-wrapper">
            <view class="i-carbon:favorite icon-carbon" :style="{ fontSize: currentIconSize }" />
          </view>
          <view class="icon-name">
            favorite
          </view>
          <view class="icon-desc">
            收藏
          </view>
        </view>

        <!-- settings -->
        <view class="icon-card" @click="copyIconCode('settings', true)">
          <view class="icon-wrapper">
            <view class="i-carbon:settings icon-carbon" :style="{ fontSize: currentIconSize }" />
          </view>
          <view class="icon-name">
            settings
          </view>
          <view class="icon-desc">
            设置
          </view>
        </view>
      </view>

      <!-- 使用示例 -->
      <view class="example-card">
        <view class="card-title">
          使用示例
        </view>
        <view class="code-examples">
          <view class="code-block">
            <view class="code-title">
              UnoCSS 方式:
            </view>
            <view class="code-content">
              &lt;div class="i-carbon:star text-xl text-yellow-500"&gt;&lt;/div&gt;
            </view>
          </view>
          <view class="code-block">
            <view class="code-title">
              自定义大小和颜色:
            </view>
            <view class="code-content">
              &lt;div class="i-carbon:home" style="font-size: 24px; color: #3b82f6;"&gt;&lt;/div&gt;
            </view>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- 对比演示 -->
    <demo-block title="图标对比" transparent>
      <view class="comparison-card">
        <view class="card-title">
          相同功能图标对比
        </view>
        <view class="comparison-content">
          <view class="grid-container">
            <view class="wot-card">
              <view class="wot-title">
                WotUI 图标
              </view>
              <view class="icon-group">
                <wd-icon name="home" :size="20" color="#3b82f6" />
                <wd-icon name="search1" :size="20" color="#3b82f6" />
                <wd-icon name="star" :size="20" color="#3b82f6" />
                <wd-icon name="heart" :size="20" color="#3b82f6" />
              </view>
              <view class="wot-desc">
                组件化使用，API统一
              </view>
            </view>
            <view class="iconify-card">
              <view class="iconify-title">
                Iconify 图标
              </view>
              <view class="icon-group">
                <view class="i-carbon:home text-20px text-green-600" />
                <view class="i-carbon:search text-20px text-green-600" />
                <view class="i-carbon:star text-20px text-green-600" />
                <view class="i-carbon:favorite text-20px text-green-600" />
              </view>
              <view class="iconify-desc">
                原子化CSS，更加灵活
              </view>
            </view>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- 使用建议 -->
    <demo-block title="使用建议" transparent>
      <view class="suggestion-group">
        <view class="suggestion-card">
          <view class="suggestion-header">
            <view class="suggestion-icon">
              💡
            </view>
            <view class="suggestion-title">
              WotUI 图标适用场景
            </view>
          </view>
          <view class="suggestion-body">
            <view>• 与WotUI组件配合使用时</view>
            <view>• 需要统一的图标API时</view>
            <view>• 快速开发，不需要过多自定义时</view>
            <view>• 移动端应用，需要保证兼容性时</view>
          </view>
        </view>

        <view class="suggestion-card">
          <view class="suggestion-header">
            <view class="suggestion-icon">
              🎨
            </view>
            <view class="suggestion-title">
              Iconify 图标适用场景
            </view>
          </view>
          <view class="suggestion-body">
            <view>• 需要更多图标选择时</view>
            <view>• 使用UnoCSS原子化CSS时</view>
            <view>• 需要灵活自定义样式时</view>
            <view>• 追求更小的包体积时</view>
          </view>
        </view>

        <view class="suggestion-card">
          <view class="suggestion-header">
            <view class="suggestion-icon">
              🤝
            </view>
            <view class="suggestion-title">
              结合使用建议
            </view>
          </view>
          <view class="suggestion-body">
            <view>
              • <text class="highlight-blue">
                WotUI图标
              </text>：用于组件内置图标，如按钮、表单等
            </view>
            <view>
              •
              <text class="highlight-green">
                Iconify图标
              </text>：用于装饰性图标，如页面图标、状态图标等
            </view>
            <view>• 两者可以在同一个项目中混用，各取所长</view>
            <view>• 建议制定团队规范，明确使用场景</view>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- 相关链接 -->
    <demo-block title="相关链接" transparent>
      <wd-cell-group border custom-class="custom-cell-group">
        <wd-cell
          title="📚 WotUI 图标文档"
          value="组件库文档"
          is-link
          @click="handleNavigate('https://wot-ui.cn/component/icon.html')"
        />
        <wd-cell
          title="🎯 Carbon 图标集"
          value="IBM设计系统"
          is-link
          @click="handleNavigate('https://icones.js.org/collection/carbon')"
        />
        <wd-cell
          title="🔧 Iconify 图标集"
          value="巨量图标合集"
          is-link
          @click="handleNavigate('https://iconify.design/')"
        />
        <wd-cell
          title="⚡ UnoCSS 图标"
          value="原子化CSS图标"
          is-link
          @click="handleNavigate('https://unocss.dev/presets/icons')"
        />
      </wd-cell-group>
    </demo-block>
  </view>
</template>

<style lang="scss" scoped>
.page-wrapper {
  min-height: 100vh;
  padding: 12px 0;
  background-color: #f7f7f7;
}

.dark .page-wrapper {
  background-color: var(--wot-dark-background);
}

.header-section {
  margin: 0 12px 12px;
}

.header-content {
  padding: 32px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
}

.dark .header-content {
  background-color: var(--wot-dark-background2);
}

.header-icon {
  margin-bottom: 12px;
  font-size: 40px;
}

.header-title {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.dark .header-title {
  color: var(--wot-dark-color);
}

.header-subtitle {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.dark .header-subtitle {
  color: var(--wot-dark-color2);
}

.header-description {
  font-size: 12px;
  color: #999;
}

.dark .header-description {
  color: var(--wot-dark-color2);
}

.star-icon {
  color: #f59e0b;
}

.size-selector-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .size-selector-card {
  background-color: var(--wot-dark-background2);
}

.card-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .card-title {
  color: var(--wot-dark-color);
}

.size-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.size-button {
  padding: 8px 12px;
  font-size: 12px;
  color: #4a5568;
  background-color: #f7fafc;
  border-radius: 8px;
  transition: all 0.2s;

  &:hover {
    background-color: #edf2f7;
  }

  &.active {
    color: #fff;
    background-color: #4299e1;
  }
}

.dark .size-button {
  color: var(--wot-dark-color);
  background-color: var(--wot-dark-background3);

  &:hover {
    background-color: var(--wot-dark-border);
  }

  &.active {
    color: #fff;
    background-color: #4299e1;
  }
}

.size-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background-color: #f7fafc;
  border-radius: 8px;
}

.dark .size-preview {
  background-color: var(--wot-dark-background3);
}

.preview-text {
  font-size: 12px;
  color: #666;
}

.dark .preview-text {
  color: var(--wot-dark-color2);
}

.info-box {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #ebf8ff;
  border: 1px solid #bee3f8;
  border-radius: 8px;
}

.dark .info-box {
  background-color: rgba(30, 64, 175, 0.2);
  border-color: #2c5282;
}

.info-title {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #2b6cb0;
}

.dark .info-title {
  color: #90cdf4;
}

.info-content {
  font-size: 12px;
  line-height: 1.6;
  color: #2c5282;
}

.dark .info-content {
  color: #a0aec0;
}

.info-link {
  color: #2b6cb0;
  text-decoration: underline;
}

.dark .info-link {
  color: #90cdf4;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .icon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .icon-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.icon-card {
  padding: 16px;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  transition: all 0.2s;

  &:active {
    transform: scale(0.95);
  }

  &:hover {
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}

.dark .icon-card {
  background-color: var(--wot-dark-background2);
}

.icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.icon-carbon {
  color: #4a5568;
}

.dark .icon-carbon {
  color: var(--wot-dark-color);
}

.icon-name {
  margin-bottom: 4px;
  font-family: monospace;
  font-size: 10px;
  color: #333;
}

.dark .icon-name {
  color: var(--wot-dark-color);
}

.icon-desc {
  font-size: 8px;
  color: #999;
}

.dark .icon-desc {
  color: var(--wot-dark-color2);
}

.example-card {
  margin-top: 16px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .example-card {
  background-color: var(--wot-dark-background2);
}

.code-examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.code-block {
  padding: 12px;
  background-color: #f7fafc;
  border-radius: 4px;
}

.dark .code-block {
  background-color: var(--wot-dark-background3);
}

.code-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: bold;
  color: #4a5568;
}

.dark .code-title {
  color: var(--wot-dark-color);
}

.code-content {
  font-family: monospace;
  font-size: 10px;
  line-height: 1.6;
  color: #666;
}

.dark .code-content {
  color: var(--wot-dark-color2);
}

.comparison-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .comparison-card {
  background-color: var(--wot-dark-background2);
}

.comparison-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.wot-card {
  padding: 16px;
  text-align: center;
  background-color: #ebf8ff;
  border-radius: 8px;
}

.dark .wot-card {
  background-color: rgba(30, 64, 175, 0.2);
}

.wot-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #2b6cb0;
}

.dark .wot-title {
  color: #90cdf4;
}

.icon-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.wot-desc {
  font-size: 10px;
  color: #2c5282;
}

.dark .wot-desc {
  color: #a0aec0;
}

.iconify-card {
  padding: 16px;
  text-align: center;
  background-color: #f0fff4;
  border-radius: 8px;
}

.dark .iconify-card {
  background-color: rgba(49, 130, 76, 0.2);
}

.iconify-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #2f855a;
}

.dark .iconify-title {
  color: #9ae6b4;
}

.iconify-desc {
  font-size: 10px;
  color: #38a169;
}

.dark .iconify-desc {
  color: #a0aec0;
}

.suggestion-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.suggestion-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .suggestion-card {
  background-color: var(--wot-dark-background2);
}

.suggestion-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.suggestion-icon {
  margin-right: 8px;
  font-size: 24px;
}

.suggestion-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .suggestion-title {
  color: var(--wot-dark-color);
}

.suggestion-body {
  font-size: 12px;
  line-height: 1.6;
  color: #666;
}

.dark .suggestion-body {
  color: var(--wot-dark-color2);
}

.suggestion-body > view {
  margin-bottom: 8px;
}

.highlight-blue {
  font-weight: bold;
  color: #3182ce;
}

.dark .highlight-blue {
  color: #63b3ed;
}

.highlight-green {
  font-weight: bold;
  color: #38a169;
}

.dark .highlight-green {
  color: #68d391;
}

.custom-cell-group {
  border-radius: 8px !important;
  overflow: hidden;
}
</style>
